<template>
  <view class="container">
    <page-meta :page-style="showhand?'overflow: hidden;' : 'overflow: auto;'"></page-meta>

    <view class="titleBar" :style="{'top':  ''+ statusBarHeight  +'px'}">
      <image src="/static/images/indexpage/goback-icon.png" class="leftImg" @click.stop="goback()"></image>
      <image src="/static/images/indexpage/delete-icon.png" class="rightImg" v-if="otObj.del_role == 1" @click.stop="deletePost()"></image>
    </view>
    <view class="bgBox">
      <u-swiper :list="otObj.imgList" height="1112" border-radius="0" mode="rect">
      </u-swiper>
    </view>
    <view class="bottom-box" :style="{'padding-bottom':''+ safeareabottom +'px'}">
      <view class="demo-name">
        <view class="name"> {{otObj.title}}</view>
      </view>

      <view class="demo-text">
        <view class="text">{{otObj.main_content}}</view>
      </view>

      <view class="demo-tag-address">
        <view class="demo-tag ">
          <view class="time"> {{otObj.createtime}}</view>
        </view>
        <view class="demo-tag demo-address">
          <view class="pic">
            <image class="img-tag" src="/static/images/indexpage/topic-icon.png"></image>
          </view>
          <view class="price"> {{otObj.label}}</view>
        </view>
      </view>
      <view class="demo-dinwei">
        <view class="pic">
          <image class="img-tag" src="/static/images/indexpage/address-icon.png"></image>
        </view>
        <view class="price"> {{otObj.address_text}}</view>
      </view>
      <u-gap height="24" bg-color="#E6E6E6"></u-gap>
      <!-- <view class="demo-title">
        <view class="name"> 求货描述</view>
      </view>
      <view class="demo-text">
        <view class="text"> {{otObj.main_content}}</view>
      </view> -->

      <!-- <view class="img-st">
        <image class="img-tag" src="/static/images/logo.png"></image>
      </view> -->
      <!-- <u-gap height="24" bg-color="#E6E6E6"></u-gap> -->

      <!--评论 别人的-->
      <view class="review-box" v-if="otObj.del_role != 1">
        <view class="sum-box">当前出价</view>
        <view class="bid-box bid-box1" v-if="priceList.length> 3">
          <view :class="{ top: animate == true }">
            <view class="line-box" v-for="(item,index) in priceList" :key="index">
              <view class="pic">
                <image class="point-tag" :src="item.price_user_avatar"></image>
              </view>
              <view class="name-box">
                <view class="name">
                  {{item.price_user_nickname}}
                </view>
                <view class="time">
                  {{item.createtime}}
                </view>
              </view>
              <view class="jubao">
                已出价
              </view>
            </view>
          </view>
        </view>
        <view class="bid-box" v-else-if="priceList.length<= 3 && priceList.length> 0">
          <view>
            <view class="line-box" v-for="(item,index) in priceList" :key="index">
              <view class="pic">
                <image class="point-tag" :src="item.price_user_avatar"></image>
              </view>
              <view class="name-box">
                <view class="name">
                  {{item.price_user_nickname}}
                </view>
                <view class="time">
                  {{item.createtime}}
                </view>
              </view>
              <view class="jubao">
                已出价
              </view>
            </view>
          </view>
        </view>
        <view class="bid-box-noprice" v-else-if="priceList.length== 0">
          <view>
            当前无报价
          </view>
        </view>
        <view class="botton-st" @click.stop="toSetPrice()">
          我要报价
        </view>
      </view>

      <!--评论 自己的-->
      <view class="review-box" v-if="otObj.del_role == 1">
        <view class="sum-box">
          <view class="topPrice">报价TOP10</view>
          <view class="allPrice" @click.stop=" toAllPrice()">全部报价<u-icon name="arrow-right"></u-icon> </view>
        </view>
        <view class="bid-box" v-if="priceList.length> 0">
          <view class="line-box" v-for="(item,index) in priceList" :key="index">
            <view class="pic">
              <image class="point-tag" :src="item.price_user_avatar"></image>
            </view>
            <view class="name-box">
              <view class="name">
                {{item.price_user_nickname}}
              </view>
              <view class="time">
                {{item.createtime}}
              </view>
            </view>
            <view class="jubao">
              已出价<text class="red">￥{{item.price}}</text>
            </view>
          </view>
        </view>
        <view class="bid-box-noprice" v-else-if="priceList.length== 0">
          <view>
            当前无报价
          </view>
        </view>
      </view>
    </view>
    <view v-if="showhand" class="bg-st" @click.stop="sethand()">
      <image src="/static/images/indexpage/xiahua-icon.png" class="shoushi" @click.stop="sethand()"></image>
    </view>
    <x-modal v-model="contractObj.isShow" :showBotton="contractObj.showBotton" :showOneBotton="contractObj.showOneBotton" :title="contractObj.title" @confirm="confirm" @cancel="cancel" :cancelText="contractObj.cancelText" :confirmText="contractObj.confirmText" :canColse="false">
      {{contractObj.content}}
    </x-modal>
  </view>
</template>

<script>
import api from '@/api/index.js'
export default {
  components: {

  },
  data() {
    return {
      screenHeight: uni.getStorageSync('screenHeight') - uni.getStorageSync('safeAreaBottom'),
      safeareabottom: uni.getStorageSync('safeAreaBottom') + 48,
      statusBarHeight: uni.getStorageSync('statusBarHeight') + 10,
      form: {
        imgList: [{
          image: '/static/images/indexpage/ershoubg.png',
          title: '昨夜星辰昨夜风，画楼西畔桂堂东'
        },
        {
          image: '/static/images/indexpage/ershoubg1.png',
          title: '身无彩凤双飞翼，心有灵犀一点通'
        },
        ],
        address: '地址',
        tag: '铜管乐器',
        time: '2023年02月13日 07:35',
        price: '123',
        name: 'dasda',
        text: '教续言边样比留那品难研而人近对，化事似，的不电，轮示奖台费叫东际我大远引易花害，童量的！书来时有希相以？轻地且满？单有台告病；子云如特台化国。教续言边样比留那品难研而人近对，化事似，的不电，轮示奖台费叫东际我大远引易花害，童量的！书来时有希相以？轻地且满？单有台告病；子云如特台化国。'
      },
      content: '',
      isShow: false,

      reviewList: [
        {
          shengfen: '', avatar: '/static/images/logo.png', name: '楼主', time: '2022/07/26 12:50:58', content: '北雀路一小区居民开灯时，家中突然爆燃！窗户被炸飞，周围3辆汽车受损',
          children: [{ shengfen: 'louzhu', avatar: '/static/images/logo.png', name: '楼主', time: '2022/07/26 12:50:58', content: '北雀路一小区居民开灯时，家中突然爆燃！窗户被炸飞，周围3辆汽车受损', },
          ]
        },
        {
          shengfen: 'louzhu', avatar: '/static/images/logo.png', name: '楼主', time: '2022/07/26 12:50:58', content: '北雀路一小区居民开灯时，家中突然爆燃！窗户被炸飞，周围3辆汽车受损',

        }
      ],
      popUpWinShow: true,
      otObj: {
      },
      main_content: '',
      isShow: false,
      popUpWinShow: true,

      formObj: {
        types: '',
        id: '',
      },
      form: {
        page: 1,
        page_size: 10,
        last_page: 0,
      },
      list: [],
      //举报参数
      jubaoObj: {},
      priceList: [],
      animate: false,
      timer: null,
      contractObj: {
        title: '提示',
        content: '是否确认删除?',// content: '是否对该用户取消关注?',//content: '是否将该用户移出黑名单?',
        isShow: false,
        showBotton: true,
        cancelText: '否',
        confirmText: '是',
        showOneBotton: false
      },
      showhand: false
    };
  },
  onShow() {
    this.init()
  },
  onLoad(options) {
    this.formObj.types = options.types
    this.formObj.id = options.id
    this.init()
    if (uni.getStorageSync('isShowHand') == 'true' || uni.getStorageSync('isShowHand') == '') {
      this.showhand = true
      setTimeout(() => {
        this.showhand = false
        uni.setStorageSync('isShowHand', 'false');
      }, 2000);
    }
  },
  onUnload() {
    clearInterval(this.timer);
  },
  onReachBottom() {
    if (this.form.page < this.form.last_page) {
      this.form.page += 1;
      this.getDev_comment();
    }
  },
  onPullDownRefresh() {
    this.init()
    setTimeout(() => {
      uni.stopPullDownRefresh();
    }, 1000);
  },
  methods: {
    scroll() {
      this.animate = true;
      setTimeout(() => {
        this.priceList.push(this.priceList[0]);
        this.priceList.shift();
        this.animate = false;
      }, 1000);
    },
    init() {
      //获取详情
      this.getpage()
      //获取评论
      // this.initcomment()
      //获取报价

    },
    initcomment() {
      this.form.page = 1;
      this.form.last_page = 0;
      this.getDev_comment()
    },
    getpage() {
      api.base.getTrendsDetail(this.formObj).then(res => {
        if (res.code == 1) {
          this.otObj = res.data;
          let positionType = ''
          if (this.otObj.del_role != 1) {
            positionType = '9'
            this.timer = setInterval(this.scroll, 2000);
          } else {
            positionType = '10'
          }

          this.getdevAskgoodsPrice(positionType)
          this.otObj.imgList = []
          for (let i = 0; i < res.data.images.length; i++) {
            this.otObj.imgList.push({
              image: res.data.images[i],
              title: i
            })
          }

        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          });
          setTimeout(() => {
            uni.navigateBack(1);
          }, 1000)
        }
      });
    },
    getDev_comment() {
      console.log(11111111111111)
      console.log({ ...this.formObj, ...this.form })
      api.base.getDev_comment({ ...this.formObj, ...this.form }).then(res => {
        if (res.code == 1) {
          this.list = this.form.page === 1 ? res.data.data : this.list.concat(res.data.data);
          this.form.last_page = res.data.last_page;
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          });
        }
      });
    },
    //点赞取消
    getTrendsGoods() {
      api.base.getTrendsGoods(this.formObj).then(res => {
        if (res.code == 1) {
          uni.$u.toast(res.msg)
          if (this.otObj.goods == 0) {
            this.otObj.goods = 1
            this.otObj.good_num++
          } else {
            this.otObj.goods = 0
            this.otObj.good_num--
          }
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          });
        }
      });
    },
    //关注取消
    getTrendsFollow() {
      api.base.getTrendsFollow({ third_uid: this.otObj.author_id }).then(res => {
        if (res.code == 1) {
          uni.$u.toast(res.msg)
          if (this.otObj.follow == 1) {
            this.otObj.follow = 0
          } else {
            this.otObj.follow = 1
          }
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          });
        }
      });
    },
    goWrith() {
      this.isShow = true
    },
    //评论
    getCommentInsert() {
      api.base.getCommentInsert({ ...this.formObj, ...{ main_content: this.main_content } }).then(res => {
        if (res.code == 1) {
          uni.$u.toast("评论成功")
          this.isShow = false
          this.main_content = ''
          this.otObj.comment_num++
          this.initcomment()
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          });
        }
      });
    },
    deletePost() {
      let that = this
      that.contractObj.content = '是否确认删除?'
      that.contractObj.isShow = true
    },
    cancel(e) {
      this.contractObj.isShow = false
    },
    //删帖
    confirm() {
      api.base.getTrendsDeletet(this.formObj).then(res => {
        if (res.code == 1) {
          uni.$u.toast("删除成功")
          this.contractObj.isShow = false
          uni.$emit("isSeach", {
            isSeachFlag: true
          });
          setTimeout(() => {
            uni.navigateBack(1);
          }, 1000)
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          });
        }
      });
    },
    //出价列表 9=求货列表滚动,10=求货列表前十,11=求货列表分页
    getdevAskgoodsPrice(position) {
      api.base.getdevAskgoodsPrice({ position: position, id: this.formObj.id }).then(res => {
        if (res.code == 1) {
          this.priceList = res.data
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          });
        }
      });
    },
    goback() {
      uni.navigateBack(1)
    },

    toAllPrice() {
      //  跳转出价详情
      uni.navigateTo({
        url: `/pages/componets/requestGoods/requestGoodsDetail/allPricePage?id=` + this.otObj.id
      });

    },
    toSetPrice() {
      uni.navigateTo({
        url: `/pages/componets/requestGoods/requestGoodsDetail/oneDetailPrice?disabled=` + false + '&id=' + this.otObj.id
      });
    }
  },
};
</script>

<style lang="less" scoped>
.container {
  position: relative;
  width: 100%;
  height: 100vh;
  // padding-bottom:120rpx;
  .titleBar {
    width: 100%;
    // height: 88rpx;
    color: #fff;
    font-size: 32rpx;
    line-height: 88rpx;
    font-weight: bold;
    display: flex;
    padding: 0 32rpx;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    // top: 0px;
    right: 0px;
    z-index: 99;

    .leftImg {
      width: 48rpx;
      height: 48rpx;
    }
    .rightImg {
      width: 48rpx;
      height: 48rpx;
    }

    .fenImg {
      width: 48rpx;
      height: 50rpx;
    }
  }
}

.bgBox {
  position: absolute;
  width: 100vw;
  height: 1112rpx;
  overflow: hidden;
  top: 0;
  z-index: 1;
}

.bg-st {
  width: 100%;
}

.bottom-box {
  position: relative;
  top: 1042rpx;
  width: 750rpx;
  // height: 270rpx;
  background: #ffffff;
  border-radius: 32rpx 32rpx 0rpx 0rpx;
  z-index: 2;
  .demo-price {
    font-family: HarmonyOS Sans-Bold, HarmonyOS Sans;
    font-weight: bold;
    color: #ff2544;
    height: 56rpx;
    line-height: 56rpx;
    padding-top: 32rpx;
    margin-bottom: 16rpx;
    display: flex;
    justify-content: center;
    align-content: center;
    .pic {
      float: left;
      font-size: 24rpx;
      line-height: 68rpx;
      .point-tag {
        width: 40rpx;
        height: 40rpx;
        border-radius: 8040rpx 8040rpx 8040rpx 8040rpx;
      }
    }
    .price {
      float: left;
      padding-left: 5rpx;
      font-size: 48rpx;
      color: #ff2544;
    }
  }
  .demo-avatar {
    height: 72rpx;
    line-height: 104rpx;
    padding-top: 32rpx;
    padding-left: 32rpx;
    margin-bottom: 16rpx;
    display: flex;
    position: relative;
    .pic {
      display: flex;
      justify-content: center;
      align-items: center;
      float: left;
      width: 72rpx;
      height: 72rpx;
      .point-tag {
        width: 72rpx;
        height: 72rpx;
        border-radius: 8040rpx 8040rpx 8040rpx 8040rpx;
      }
    }
    .name {
      height: 72rpx;
      line-height: 72rpx;
      padding-left: 16rpx;
      padding-right: 24rpx;
      font-size: 32rpx;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: bold;
      color: #333333;
    }

    .status {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 72rpx;
      .status-tag {
        width: 120rpx;
        height: 50rpx;
      }
    }
    .jubao {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 72rpx;
      .jubao-tag {
        position: absolute;
        right: 32rpx;
        width: 56rpx;
        height: 56rpx;
      }
    }
  }
  .demo-name {
    // height: 54rpx;
    padding-left: 32rpx;
    padding-right: 32rpx;
    font-size: 36rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: bold;
    color: #333333;
    padding-top: 32rpx;
    // padding-bottom: 32rpx;
  }
  .demo-text {
    margin: 24rpx 32rpx 32rpx 32rpx;
    line-height: 42rpx;
    font-size: 28rpx;
    font-family: PingFang SC-Medium, PingFang SC;
    // font-weight: 500;
    color: #333333;
  }
  .demo-tag-address {
    margin: 0rpx 32rpx 32rpx 32rpx;
    width: calc(100% - 64rpx);
    height: 47rpx;
    display: flex;
    justify-content: space-between;
    .demo-tag {
      // padding-left: 16rpx;
      // padding-right: 16rpx;
      display: flex;
      // width: 168rpx;
      height: 36rpx;
      background: #ffffff;

      border-radius: 29rpx;
      justify-content: center;
      align-items: center;
      .pic {
        width: 24rpx;
        height: 24rpx;
        display: flex;
        justify-content: center;
        align-content: center;
        .img-tag {
          width: 24rpx;
          height: 24rpx;
        }
      }
      .price {
        padding-left: 12rpx;
        font-size: 18rpx;
        color: #999999;

        height: 36rpx;
        line-height: 36rpx;
      }
      .time {
        color: #999999;
        font-size: 22rpx;
        height: 36rpx;
        line-height: 36rpx;
      }
    }
    .demo-address {
      padding-left: 10rpx;
      padding-right: 16rpx;
      background: rgba(109, 12, 247, 0.1);
      .price {
        color: #6d0cf7;
      }
      .pic {
        height: 24rpx;
        line-height: 24rpx;
        width: 24rpx;
        height: 24rpx;
        // border-radius: 100rpx;
        // background: #6d0cf7;
        font-size: 24rpx;
        color: #ffffff;
        display: flex;
        justify-content: center;
        align-content: center;
        .img-tag {
          width: 24rpx;
          height: 24rpx;
        }
      }
    }
  }
  .demo-dinwei {
    display: flex;
    line-height: 112rpx;
    align-content: center;

    width: calc(100% - 64rpx);
    margin: 0 32rpx 32rpx 32rpx;
    background: #f5f5f5;
    height: 112rpx;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    .pic {
      width: 48rpx;
      height: 112rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-left: 28rpx;
      margin-right: 18rpx;
      .img-tag {
        width: 48rpx;
        height: 48rpx;
      }
      .price {
        padding-left: 12rpx;
        font-size: 28rpx;
        color: #333333;
        height: 64rpx;
        line-height: 64rpx;
      }
    }
  }
  .demo-title {
    height: 46rpx;
    font-size: 30rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: bold;
    color: #333333;
    line-height: 46rpx;
    margin: 24rpx 32rpx;
  }
  .img-st {
    margin: 30rpx 32rpx 48rpx 32rpx;
    width: calc(100% - 64rpx);
    height: 360rpx;
    .img-tag {
      width: 100%;
      height: 360rpx;
    }
  }
  .demo-degree {
    margin: 32rpx;
    padding: 16rpx;
    background: #f5f5f5;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    .text-box {
      width: 88rpx;
      height: 34rpx;
      background: rgba(109, 12, 247, 0.1);
      border-radius: 4rpx 4rpx 4rpx 4rpx;
      opacity: 1;
      font-size: 18rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #6d0cf7;
      line-height: 34rpx;
      padding: 4rpx 8rpx 4rpx 8rpx;
    }
    .text1-box {
      font-size: 28rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #666666;
      line-height: 33rpx;
    }
  }
  .review-box {
    .sum-box {
      height: 46rpx;
      font-size: 30rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
      line-height: 46rpx;
      margin-left: 32rpx;
      margin-top: 24rpx;
      margin-right: 32rpx;
      display: flex;
      justify-content: space-between;
      .topPrice {
        font-size: 30rpx;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: bold;
        color: #333333;
      }
      .allPrice {
        font-size: 24rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
      }
    }
    .bid-box1 {
      height: 336rpx;
    }
    .bid-box-noprice {
      height: 112rpx;
      line-height: 112rpx;
      text-align: center;
    }
    .bid-box {
      margin: 32rpx;
      width: calc(100% - 64rpx);
      // height: 336rpx;
      overflow: hidden;
      background: #f5f5f5;
      border-radius: 16rpx 16rpx 16rpx 16rpx;
      opacity: 1;
      .line-box {
        height: 112rpx;
        width: calc(100% - 64rpx);
        margin-left: 32rpx;
        display: flex;
        position: relative;
        align-items: center;
        .pic {
          display: flex;
          justify-content: center;
          align-items: center;
          float: left;
          width: 64rpx;
          height: 64rpx;
          .point-tag {
            width: 64rpx;
            height: 64rpx;
            border-radius: 8040rpx 8040rpx 8040rpx 8040rpx;
          }
        }
        .name-box {
          height: 64rpx;
          padding-left: 16rpx;
          padding-right: 24rpx;

          .name {
            height: 32rpx;
            line-height: 32rpx;
            font-size: 24rpx;
            font-family: PingFang SC-Bold, PingFang SC;
            font-weight: bold;
            color: #333333;
          }
          .time {
            font-size: 20rpx;
            font-family: PingFang SC-Medium, PingFang SC;
            font-weight: 500;
            color: rgba(0, 0, 0, 0.24);
          }
        }
        .jubao {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 72rpx;
          position: absolute;
          right: 0rpx;
          font-size: 24rpx;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #333333;
          .red {
            padding-left: 8rpx;
            font-weight: bold;
            color: #ff2544 !important;
          }
        }
      }
    }
    .botton-st {
      height: 88rpx;
      background: #6d0cf7;
      border-radius: 24rpx 24rpx 24rpx 24rpx;
      opacity: 0.5;
      font-size: 28rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #ffffff;
      line-height: 88rpx;
      text-align: center;
      margin: 32rpx 64rpx 0rpx 64rpx;
      width: calc(100% - 128rpx);
    }
  }
}
.footPublish {
  display: flex;
  align-items: center;
  height: 104rpx;
  .myInput {
    display: inline-block;
    background: #f7f7f7;
    border-radius: 40rpx;
    opacity: 1;
    border: 1rpx solid rgba(0, 0, 0, 0.12);
    flex: 1;
    padding: 6rpx 18rpx;
    ::v-deep.u-input__textarea {
      min-height: 0 !important;
    }
  }

  .right {
    display: inline-block;
    background: #333333;
    margin-left: 24rpx;
    border-radius: 60rpx;
    font-size: 28rpx;
    font-weight: bold;
    color: #ffffff;
    line-height: 42rpx;
    padding: 10rpx 26rpx;
  }
  .right-box {
    display: flex;
    height: 42rpx;
    line-height: 42rpx;
    padding-left: 6rpx;
    .img {
      width: 40rpx;
      padding-left: 16rpx;
      margin-right: 10rpx;
      .img-tag {
        width: 40rpx;
        height: 40rpx;
      }
    }
    .value {
      padding-left: 10rpx;

      font-size: 28rpx;
      font-family: HarmonyOS Sans-Regular, HarmonyOS Sans;
      font-weight: 400;
      color: #333333;
      // padding-right: 30rpx;
    }
  }
}
.x-footBar {
  // height: 104rpx !important;
  padding: 0rpx 26rpx 26rpx 32rpx !important;
  // box-sizing: border-box;
}
.content {
  display: flex;
  height: 100vh;
  padding: 0 30rpx;
}
.lists {
  height: 500rpx;
  overflow: hidden;
  width: 60%;
}
.list {
  height: 100rpx;
  display: flex;
  align-items: center;
  font-size: 26rpx;
}
text {
  padding-left: 20rpx;
}
.top {
  transition: all 0.5s;
  margin-top: -112rpx;
}

.bg-st {
  position: absolute;
  width: 100%;
  height: 100vh;
  top: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 9999;
  display: flex;
  justify-content: center;
  .shoushi {
    width: 88rpx;
    height: 88rpx;
    position: absolute;
    bottom: 200rpx;
  }
}
</style>